'use client'

import React from 'react';
import { BaseEditorProps } from './types';

export default function NewsListEditor({ properties, updateProperty, handleFileSelect }: BaseEditorProps) {
  return (
    <div className="space-y-4">
      <div>
        <h3 className="font-medium text-gray-800 mb-3">新闻列表数据</h3>
        <div className="space-y-3">
          {(properties.items || []).map((item: any, index: number) => (
            <div key={index} className="border border-gray-200 rounded p-3 bg-gray-50">
              <div className="space-y-2">
                <div>
                  <label className="block text-xs text-gray-600 mb-1">标题</label>
                  <input
                    type="text"
                    className="w-full p-2 border border-gray-300 rounded text-sm"
                    value={item.title || ""}
                    onChange={(e) => {
                      const newItems = [...(properties.items || [])];
                      newItems[index].title = e.target.value;
                      updateProperty('items', newItems);
                    }}
                  />
                </div>
                <div>
                  <label className="block text-xs text-gray-600 mb-1">描述</label>
                  <textarea
                    className="w-full p-2 border border-gray-300 rounded text-sm"
                    rows={3}
                    value={item.description || ""}
                    onChange={(e) => {
                      const newItems = [...(properties.items || [])];
                      newItems[index].description = e.target.value;
                      updateProperty('items', newItems);
                    }}
                  />
                </div>
                <div>
                  <label className="block text-xs text-gray-600 mb-1">图片URL</label>
                  <input
                    type="text"
                    className="w-full p-2 border border-gray-300 rounded text-sm"
                    value={item.image || ""}
                    onChange={(e) => {
                      const newItems = [...(properties.items || [])];
                      newItems[index].image = e.target.value;
                      updateProperty('items', newItems);
                    }}
                  />
                </div>
                <div>
                  <label className="block text-xs text-gray-600 mb-1">上传图片</label>
                  <input
                    type="file"
                    accept="image/*"
                    onChange={(e) => handleFileSelect(e, { type: 'news-list', index })}
                    className="w-full text-sm file:mr-2 file:py-1 file:px-3 file:rounded file:border file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
                  />
                </div>
                <div>
                  <label className="block text-xs text-gray-600 mb-1">跳转链接</label>
                  <input
                    type="url"
                    placeholder="https://example.com"
                    className="w-full p-2 border border-gray-300 rounded text-sm"
                    value={item.link || ""}
                    onChange={(e) => {
                      const newItems = [...(properties.items || [])];
                      newItems[index].link = e.target.value;
                      updateProperty('items', newItems);
                    }}
                  />
                  <p className="text-xs text-gray-500 mt-1">用户点击图片时将在新窗口打开此链接</p>
                </div>
                <button
                  type="button"
                  className="text-red-500 hover:text-red-700 text-sm"
                  onClick={() => {
                    const newItems = [...(properties.items || [])];
                    newItems.splice(index, 1);
                    updateProperty('items', newItems);
                  }}
                >
                  删除此项目
                </button>
              </div>
            </div>
          ))}
          <button
            type="button"
            className="w-full py-2 border-2 border-dashed border-gray-300 rounded text-gray-500 hover:border-gray-400 hover:text-gray-600 text-sm"
            onClick={() => {
              const newItems = [...(properties.items || []), { id: Date.now().toString(), title: "新闻标题", description: "新闻描述", image: "" }];
              updateProperty('items', newItems);
            }}
          >
            + 新增新闻项目
          </button>
        </div>
      </div>

      <div className="space-y-3">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">图片宽度 (px)</label>
          <input
            type="number"
            min="100"
            max="800"
            className="w-full p-2 border border-gray-300 rounded"
            value={properties.imageWidth || 400}
            onChange={(e) => updateProperty('imageWidth', parseInt(e.target.value))}
          />
          <p className="text-xs text-gray-500 mt-1">
            图片高度将根据宽度自动调整
          </p>
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">每页显示数量</label>
          <input
            type="number"
            min="1"
            max="10"
            className="w-full p-2 border border-gray-300 rounded"
            value={properties.itemsPerPage || 3}
            onChange={(e) => updateProperty('itemsPerPage', parseInt(e.target.value))}
          />
          <p className="text-xs text-gray-500 mt-1">
            总页数将根据新闻项目数量自动计算
          </p>
        </div>
      </div>
    </div>
  );
}
